<template>
	<!-- 
	swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
	<mescroll-uni
		ref="mescrollRef"
		@init="mescrollInit"
		height="100%"
		:down="downOption"
		@down="downCallback"
		:up="upOption"
		@up="upCallback"
		@emptyclick="emptyClick"
		bottom="140rpx"
		:safearea="true"
	>
		<!-- 数据列表 -->
		<view class="course-list" @click="dropdownShow = false">
			<!-- 我的课程 -->
			<template v-if="index == 0">
				<my-course v-for="(item, myIndex) in list" :key="myIndex" :item="item"></my-course>
			</template>
			<!-- 全部课程 -->
			<template v-if="index == 1">
				<!-- <view class="choose flex align-between vertical-center">
					小魏店（离您最近） 
					<view class="icon"></view>
				</view> -->
				<dropdown-list :show="dropdownShow" :top="62" :height="420">
					<template v-slot:selectionbox>
						<view class="choose flex align-between vertical-center" @click.stop="dropdownShow = !dropdownShow">
							{{ shopList[shopIndex].name || "" }}
							<view class="icon"></view>
						</view>
					</template>
					<!-- 下拉选项框 -->
					<template v-slot:dropdownbox>
						<view class="selected-list" @click.stop="">
							<scroll-view scroll-y class="dropdown-scroll">
								<view class="stores-list">
									<block v-for="(item, index) in shopList" :key="index">
										<view class="stores-list-item flex align-between vertical-center" @click.stop="bindTapStoresItem(item.id, index)">
											<text>{{item.name}}</text>
											<!-- <text>125.2km</text> -->
										</view>
									</block>
								</view>
							</scroll-view>
						</view>
					</template>
				</dropdown-list>
				<all-course v-for="(item, allIndex) in list" :key="allIndex" :item="item"></all-course>
			</template>
		</view>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';
import DropdownList from '@/components/dropdown-list/dropdown-list';
import myCourse from './my-course.vue';
import allCourse from './all-course.vue';
import CourseApi from "@/api/course.js";

export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		myCourse,
		allCourse,
		DropdownList
	},
	data() {
		return {
			dropdownShow: false,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				},
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					tip: '~ 空空如也 ~', // 提示
					btnText: '去首页看看'
				}
			},
			list: [] ,//列表数据
			shopList: [],
			
			shopId: "",
			shopIndex: 0
		};
	},
	props: {
		tabs: Array // tab菜单,此处用于取关键词
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll();
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			//联网加载数据
			this.index === 0 ? this.getMyCourse(page) : this.getAllCourse(page);
		},
		// 获取我的课程列表
		async getMyCourse(page) {
			//联网失败, 结束加载
			// this.mescroll.endErr();
			try {
				const res = await CourseApi.GetMyOrder({page: page.num});
				if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
				this.list = this.list.concat(res.list); //
				this.mescroll.endBySize(res.list.length, res.total)
			} catch(err) {
				this.mescroll.endBySize(0);
				// this.mescroll.endErr();
			}
		},
		// 获取所有课程列表
		async getAllCourse(page) {
			//联网失败, 结束加载
			// this.mescroll.endErr();
			try {
				const res = await CourseApi.GetAllCourse({
					page: page.num,
					id: this.shopId,
				})
				if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
				let courseList = res.course_list
				this.list = this.list.concat(courseList); //
				this.shopList = res.shop_list;
				this.mescroll.endBySize(courseList.length, res.total)
			} catch(err) {
				this.mescroll.endBySize(0);
			}
		},
		bindTapStoresItem(id, index) {
			this.shopId = id;
			this.shopIndex = index;
			this.dropdownShow = !this.dropdownShow;
			this.mescroll.resetUpScroll();
		},
		//点击空布局按钮的回调
		emptyClick() {
			uni.switchTab({
				url: "/pages/tab/home/home"
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.course-list {
	padding: 0 20rpx;
}

.choose {
	background-color: $color-white;
	height: 60rpx;
	margin-bottom: 30rpx;
	border-radius: 5rpx;
	box-shadow: 0 0 10rpx rgba(#888, 0.1);
	padding: 0 25rpx;
	font-size: 24rpx;
	color: $text-color;
	&:active {
		background-color: $bg-color-grey;
	}
	.icon {
		width: 22rpx;
		height: 14rpx;
		background-image: url('../../../../static/icon/xia.png');
		background-size: 100% 100%;
	}
}

.selected-list {
	width: 705rpx;
	margin-left: 3rpx;
	background: #f9f9f9;
	border-radius: 0 0 20rpx 20rpx;
	overflow: hidden;
	transform: translateZ(0);
	box-shadow: 0 3px 10rpx rgba(#888, 0.3);
}
.dropdown-scroll {
	height: 400rpx;
}
.stores-list {
	&-item {
		padding: 20rpx 25rpx;
		font-size: 24rpx;
		color: $text-color-grey;
		position: relative;
		&::after {
			position: absolute;
			bottom: 1rpx;
			content: '';
			width: 100%;
			height: 1rpx;
			background-color: #eee;
		}
		&:active {
			background-color: $bg-color-hover;
		}
		&:last-child {
			&::after {
				height: 0;
			}
		}
	}
}
</style>
